<template>
	<view class="mine" @click.top="close2">
		<view class="userdata">
			<view class="w-center df df-align-items" @click="login">
				<image :src="userinfo.avatar? IMG_URL+'/'+userinfo.avatar: '../../static/mine/avatar.png'"
					mode="aspectFill"></image>
				<view class="userdata-r">
					<view class="userid">
						{{userinfo.nickname || "未登录,点击登录"}}
					</view>
					<view class="labels df">
						<view class="register-vip df df-justify-content-alin">注册会员</view>
						<view class="authen" v-if="userinfo.audit_car == 0"
							@click="$navigateTo('/pages/home/owner/owner')">未认证车辆</view>
						<view class="authen" v-else>已认证车辆</view>
					</view>
				</view>
			</view>
			<view class="mine-monney w-center df df-justify-content-between df-align-items">
				<view class="mine-monney-l fg-line">
					<view>
						<image src="@/static/mine/money.png" mode="aspectFill"></image>
						<text>加油补贴(元)</text>
						
						<zb-tooltip placement="bottom-start" ref="tooltip11" color='rgba(247, 247, 247,0.7)'
							style='position: absolute;top: 90px;left:145px;'>
							<view slot="content" style="width: 400rpx;color: #888;font-size: 20rpx;">
								<scroll-view scroll-y="true" style="height: 50vh;">
									<view class="content-rules"
										style="width: 400rpx;word-wrap: break-word;word-break: break-all;">
										<rich-text style="word-wrap: break-word;word-break: break-all;" :nodes="rules">
										</rich-text>
									</view>
								</scroll-view>
							</view>
							<view style="display: flex;">
								<view style="width:19rpx;"></view>
								<u-icon name="question-circle" size="8" customStyle="margin-top:10rpx"></u-icon>
							</view>
						</zb-tooltip>
					
					</view>
					<view @click="$navigateTo('/pages/mine/refue-gold/refue-gold?m='+userinfo.oil_money)"
						class="top-money">{{userinfo.oil_money}}
					</view>
						
				</view>
			
				<view class="mine-monney-l">
					<view>
						<text>积分总额</text>
					</view>
					<view class="top-money" @click="$navigateTo('/pages/mine/score/score?m='+userinfo.station_score)">
						{{userinfo.station_score}}
					</view>
				</view>
				<!-- <view class="mine-monney-r" @click="$navigateTo('/pages/mine/use-rules/use-rules')">
					使用规则
				</view> -->
			</view>
		</view>
		<view class="w-center">
			<view class="setting-item df df-justify-content-between df-align-items" v-for="(item,index) in set_list"
				:key="index"  v-if="item.show != '' && item.show !== null && item.show != 0"><!-- @click="goTo(item.url)" -->
				<view class="setting-item-l df df-align-items" @click="goTo(item.url)">
					<image :src="item.icon" mode="aspectFill"></image>
					<text>{{item.name}}</text>
				</view>
				<!-- #ifdef MP-WEIXIN -->
				<view class="setting-item-r">
					<text :style="{color: item.color}">{{item.info}}
					</text>
					<u-icon v-if="item.id==4" name="question-circle" @click="tipsInvoice" size="8px"
					:custom-style="{top: '4px',left: '-464rpx',position: 'relative'}"
					></u-icon>
					<text class="iconfont icon-chakangengduo" @click="goTo(item.url)"></text>
				</view>
			
				<!-- #endif -->
				<!-- #ifdef MP-ALIPAY -->
				<view class="setting-item-r" v-if="item.info !== ''">
					<text :style="{color: item.color}">{{item.info}}</text>
					<u-icon v-if="item.id==4" name="question-circle" @click="tipsInvoice"
					:custom-style="{top: '6px',left: '-464rpx',position: 'relative'}"
					></u-icon>
					<text class="iconfont icon-chakangengduo" @click="goTo(item.url)"></text>
				</view>
				<!-- #endif -->
			
			</view>
		</view>
		<!-- 自定义提示框 -->
		<toast-model class="model" ref="toastModel" title-size="40" :title="modelTitle" :content="content" 
		:confirmText="confirmText"
		:cancelText="cancelText"
			></toast-model>
		<!-- <view style="font-size: 22rpx;text-align: center;margin:40rpx auto;color: #888;"
			@click="$navigateTo('/pages/web/index')">
			技术支持&copy;成都笛卡科技
		</view> -->
		<!-- <u-popup :show="show" mode="center" :round="10" @close="close" @open="open">
			<view class="popup">
				<view class="close">
					<u-icon @click="close()" name="close" size="18" class=''></u-icon>
				</view>
				<text>加油金使用规则：</text>
			</view>
		</u-popup> -->
	</view>
</template>

<script>
	import api from '@/api/mine.js';
	import mApi from '@/api/home.js';
	import toastModel from '@/components/toast-model/toastModel.vue';
	
	export default {
		components: {
			toastModel
		},
		data() {
			return {
				modelTitle:'开票说明',
				confirmText:'知道了',
				cancelText:'取消',
				set_list: [{
						id: 1,
						name: '会员加油金',
						info: '',
						icon: require('@/static/mine/hyjyj.png'),
						url: '/pages_order/pages/order/member/member',
						color: ''
					}, {
						id: 2,
						name: '我的收藏',
						info: '',
						icon: require('@/static/mine/wdsc.png'),
						url: '/pages/mine/collection/collection',
						color: ''
					},
					{
						id: 3,
						name: '我的优惠券',
						info: '',
						icon: require('@/static/mine/coupon.png'),
						url: '/pages/mine/coupon/coupon',
						color: ''
					},
					{
						id: 4,
						name: '关于发票',
						info: '',
						icon: require('@/static/mine/kfp.png'),
						url: '/pages/mine/open-invoice/open-invoice',
						color: ''
					},
					{
						id: 5,
						name: '我的证件',
						info: '',
						icon: require('@/static/mine/wdxx.png'),
						url: '/pages/home/authen-car/crad-list',
						color: ''
					},
					{
						id: 6,
						name: '收货地址',
						info: '',
						icon: require('@/static/mine/shdz.png'),
						url: '/pages/mine/shipAddress/index',
						color: ''
					},
					{
						id: 7,
						name: '优惠券订单',
						info: '',
						icon: require('@/static/mine/couponOrder.png'),
						url: '/pages_order/pages/order/coupon-order/index',
						color: ''
					},
					// #ifdef MP-WEIXIN
					{
						id: 8,
						name: '在线咨询',
						info: '400-028-5608',
						icon: require('@/static/mine/zxzx.png'),
						url: '',
						color: '#F12F63'
					},
					// #endif
				],
				userinfo: {},
				IMG_URL: '',
				show: false,
				content: '规则规则',
				title: 'Hello',
				left: 0,
				isShow: false,
				rules: '',
				linkTel:'',//客服电话
			}
		},
		created() {
			// // #ifdef MP-ALIPAY
			// this.set_list.unshift({id: 0, name: '邀请赚钱', info: '立即邀请', icon: require('@/static/mine/yqzq.png'), url: '/pages/share-money/share-money',  color:''});
			// // #endif
			// #ifndef MP-ALIPAY
			this.set_list.unshift({
				id: 0,
				name: '推广赚钱',
				info: '',
				icon: require('@/static/mine/tgzq.png'),
				url: '/pages/extension/index',
				color: '',
				show: 'true'
			})
			// #endif
			// #ifdef MP-ALIPAY
			this.getLinkTel()
			// #endif
		},
		onShow() {
			if(!uni.getStorageSync('userinfo').token){
				console.log('未登录');
			}else{
				this.getUserInfo();
			}
		},
		onLoad() {
			
			//微信登录
			if (!uni.getStorageSync('userinfo').token) {
				this.getIsRegister();
			}
			
			this.IMG_URL = this.$IMG_URL;
			this.getUseRules();

			// #ifdef MP-ALIPAY
			// 支付宝小程序关闭页面下拉(默认开启下拉)
			my.setCanPullDown({
				canPullDown: false
			});
			// #endif
			
		},
		methods: {
			getIsRegister(){
				// #ifdef MP-WEIXIN
				uni.login({
				        provider: "weixin",
				        success: (wxInfo) => {
				          // 获取到code后，提交给服务端
						  api.appletLogin( {
				            code: wxInfo.code,
				          }).then(res => {
							  if(res.data.is_register==1){
								  this.userinfo = res.data.userinfo;
								  uni.setStorage({ key: 'is_register',data:res.data.is_register	})
								  uni.setStorage({ key: 'userinfo',data: {token: res.data.userinfo.token} })
							  }else{
								   uni.setStorage({ key: 'is_register',data:0})
								   uni.setStorage({ key: 'userinfo',data: {token: res.data.userinfo.token} })
							  }
							 
							   
						  })
						  
				        },
			    });
				// #endif
			},
			login(){
				this.getUserInfo();
			},
			getUseRules() {
				mApi.getUseRules().then(res => {
					if (res.code == 1) {
						this.rules = res.data.content.replace(
								/<p([\s\w"=\/\.:;]+)((?:(style="[^"]+")))/ig, '<p')
							.replace(/<p>/ig, '<p style="font-size: 10Px; line-height: 25Px;width: 100%">')
							.replace(/<img([\s\w"-=\/\.:;]+)((?:(height="[^"]+")))/ig, '<img$1')
							.replace(/<img([\s\w"-=\/\.:;]+)((?:(width="[^"]+")))/ig, '<img$1')
							.replace(/<img([\s\w"-=\/\.:;]+)((?:(style="[^"]+")))/ig, '<img$1')
							.replace(/<img([\s\w"-=\/\.:;]+)((?:(alt="[^"]+")))/ig, '<img$1')
							.replace(/<img([\s\w"-=\/\.:;]+)/ig,
								'<img$1 style="width: 100%;object-fit: contain;"');
					}
				})
			},
			configs() {
				this.isShow = false
			},
			close2() {
				//console.log(1111);
				this.$refs.tooltip11.close()
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			toTips() {
				//console.log(111);
				this.show = true
			},
			tipsInvoice(){
				this.modelTitle ;
				this.content='平台不支持开据线上发票，客户填写信息后油站开具发票。' ;
				this.confirmText = '知道了';
				this.cancelText = '取消';
				this.$refs.toastModel.open();
			},
			//跳转页面
			goTo(url) {
				if(!url){
					uni.makePhoneCall({
						phoneNumber:"400-028-5608"
					})
				}else{
					if (!uni.getStorageSync('userinfo').token) {
						this.getUserInfo();
					} else {
						uni.navigateTo({
							url
						})
					}
				}
				
			},
			getUserInfo() {
				api.getUserInfo().then(res => {
					//console.log(res,55555);
					if (res.code == 1) {
						this.userinfo = res.data;
						// #ifdef MP-ALIPAY
						if(!this.userinfo.nickname){
							this.userinfo.nickname = '支付宝用户'
						}
						// #endif
						// this.set_list[this.set_list.length - 1].info = res.data.link_tel;
						// #ifdef MP-WEIXIN
						this.set_list[this.set_list.length - 1].info = "400-028-5608";
						// #endif
						this.set_list[0].show = res.data.promoter_station_id;
					}
				});
			},
			getLinkTel() {
				api.getLinkTel().then(res => {
					if (res.code == 1) {
						this.linkTel = res.data.link_tel
						// #ifdef MP-ALIPAY
						if(this.linkTel !== ''){
							//console.log(1111);
							this.set_list.push({
								id: 8,
								name: '在线咨询',
								info: '',
								icon: require('@/static/mine/zxzx.png'),
								url: '',
								color: '#F12F63'
							});
						}
						this.set_list[this.set_list.length - 1].info = res.data.link_tel;
						// #endif
					}
				});
			}
			// tellPhone(phone){
			// 	uni.makePhoneCall({
			// 		phoneNumber: phone
			// 	})
			// }
		}
	}
</script>
<style>
	page {
		background: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.popup {
		position: relative;
		padding: 30rpx 20rpx;
		width: 500rpx;
		height: 700rpx;

		.close {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
		}
	}

	.mine {
		padding-bottom: 1rpx;

		.userdata {
			padding-top: 12rpx;
			background: linear-gradient(180deg, #fff 0%, #F5F5F5 100%);

			image {
				width: 108rpx;
				height: 108rpx;
				border-radius: 50%;
			}

			.userdata-r {
				padding-left: 26rpx;

				.userid {
					font-size: 38rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #323232;
				}

				.labels {
					padding-top: 16rpx;

					view {
						height: 32rpx;
						font-size: 20rpx;
						border-radius: 100rpx;
						font-family: PingFang SC;
						padding: 0 14rpx;
						line-height: 32rpx;
						box-sizing: border-box;
						vertical-align: middle;
					}

					.register-vip {
						border: 1px solid #323232;
						font-weight: bold;
						color: #323232;
						margin-right: 10rpx;
					}

					.authen {
						// background: #E2E5EE;
						background-color: #F12F63;
						opacity: 1;
						font-weight: 500;
						// color: #949599;
						color: #fff;
					}

				}
			}

			.mine-monney {
				padding: 0 32rpx;
				box-sizing: border-box;
				margin-top: 40rpx;
				height: 188rpx;
				background: url('');
				background-size: 100% 100%;
				.fg-line{
					     border-right: 1.5px solid white;
					}
				.mine-monney-l {
					flex: 1;
					text-align: center;
					image {
						width: 34rpx;
						height: 34rpx;
					}
					text {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #6F4821;
						padding-left: 8rpx;
					}

					.top-money {
						font-size: 46rpx;
						font-family: PingFang SC;
						font-weight: 800;
						color: #333333;
						padding-top: 8rpx;
					}
					
				}

				.mine-monney-r {
					width: 140rpx;
					height: 52rpx;
					background: linear-gradient(270deg, #5B2E0D 0%, #A16124 100%);
					border-radius: 26rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFDAB2;
					text-align: center;
					line-height: 52rpx;
				}
			}
		}

		.setting-item {
			border-bottom: 1px solid #EEEEEE;
			padding-bottom: 42rpx;
			padding-top: 38rpx;

			.setting-item-l {
				image {
					width: 46rpx;
					height: 46rpx;
				}

				text {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1A1A1A;
					padding-left: 18rpx;
				}
			}

			.setting-item-r {
				text {
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}
			}
		}
	}
</style>
